<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Heart</title>
    <style>
        .heart{
            position: relative;
            margin: 200px auto;
            width: 200px;
            height: 200px;
           /* transform: rotate(135deg);
            -ms-transform: rotate(135deg); !* IE 9 *!
            -moz-transform: rotate(135deg); !* Firefox *!
            -webkit-transform: rotate(135deg); !* Safari 和 Chrome *!
            -o-transform: rotate(135deg);*/
        }
        .heart .square{
            background: red;
            width: 100%;
            padding-bottom: 100%; /* padding百分比相对父元素宽度计算 */
            height: 0;  /*避免被内容撑开多余的高度*/
            z-index: 10;
        }
        .heart .semicircle{


        }
        .heart .semicircle1{
            width:200px;
            height:100px;
            background-color:red;
            position: absolute;
            top: -100px;
            left: 0;
            border-radius:100px 100px 0 0;
            -webkit-animation-name: myfirst1;
            -webkit-animation-duration: 3s;
            -webkit-animation-timing-function: linear;
            /*-webkit-animation-delay: 3s;*/
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            -webkit-animation-play-state: running;
        }
        @-webkit-keyframes myfirst1 /* Safari 和 Chrome */
        {
            0%   {top:-100px;}
            25%  {top:-50px;}
            50%  {  top:0px;}
            75%  { top:-50px;}
            100% { top:-100px;}
        }
        .heart .semicircle2{
            width:100px;
            height:200px;
            background-color:red;
            position: absolute;
            top: 0;
            left: 200px;
            border-radius:0 100px 100px 0;
            -webkit-animation-name: myfirst2;
            -webkit-animation-duration: 1s;
            -webkit-animation-timing-function: linear;
            -webkit-animation-delay: 3s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            -webkit-animation-play-state: running;
        }
        @-webkit-keyframes myfirst2 /* Safari 和 Chrome */
        {
            0%   {left:200px;}
            25%  {left:150px;}
            50%  { left:100px;}
            75%  { left:150px;}
            100% { left:200px;}
        }
        .heart .semicircle3{
            width:200px;
            height:100px;
            background-color:yellow;
            position: absolute;
            top: 100px;
            left: 0;
            border-radius:0 0 100px 100px;
            -webkit-animation-name: myfirst3;
            -webkit-animation-duration: 3s;
            -webkit-animation-timing-function: linear;
            -webkit-animation-delay: 1s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            -webkit-animation-play-state: running;
        }
        @-webkit-keyframes myfirst3 /* Safari 和 Chrome */
        {
            0%   {top:100px;}
            25%  {top:150px;}
            50%  {  top:200px;}
            75%  { top:150px;}
            100% { top:100px;}
        }
        .heart .semicircle4{
            width:100px;
            height:200px;
            background-color:red;
            position: absolute;
            top: 0;
            left: -100px;
            border-radius:100px 0 0 100px;
            -webkit-animation-name: myfirst4;
            -webkit-animation-duration: 1s;
            -webkit-animation-timing-function: linear;
            -webkit-animation-delay: 4s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            -webkit-animation-play-state: running;
        }
        @-webkit-keyframes myfirst4 /* Safari 和 Chrome */
        {
            0%   {left:0px;}
            25%  {left:-50px;}
            50%  { left:-100px;}
            75%  { left:-50px;}
            100% { left:0px;}
        }
    </style>
</head>
<body>
<div class="heart">
    <div class="square"></div>
    <div class="semicircle semicircle1"></div>
  <!--  <div class="semicircle semicircle2"></div>-->
    <div class="semicircle semicircle3"></div>
  <!--  <div class="semicircle semicircle4"></div>-->
</div>


</body>
</html>